Skip to main content

Cette page décrit l'architecture et les choix techniques fondamentaux du projet de refonte du portail web du Crédit Agricole Mutuel. Elle sert de référence pour l'équipe de développement et toute personne souhaitant comprendre le fonctionnement interne de la plateforme.

Architecture Technique du Portail Web CMA

1. Vue d'Ensemble de l'Architecture​

L'architecture est conçue pour être moderne, découplée et scalable. Elle s'appuie sur une plateforme d'hébergement managée (PaaS) pour maximiser l'efficacité opérationnelle et la sécurité, tout en utilisant un CMS puissant et flexible pour la gestion de contenu.

Le diagramme ci-dessous illustre les principaux composants et leurs interactions :

Principaux flux​

  • Requêtes Utilisateur : Toutes les requêtes HTTP(S) passent par un Load Balancer qui gère la terminaison SSL et répartit la charge vers les instances du service web.

  • Service Applicatif : Le cœur de l'application est un conteneur Docker exécutant Drupal 11 sur un serveur Nginx. Ce service est "stateless" (sans état), ce qui lui permet de scaler horizontalement en ajoutant simplement de nouvelles instances.

  • Base de Données : Les données structurées (contenus, utilisateurs, configuration) sont stockées dans une base de données MySQL managée, garantissant haute disponibilité et sauvegardes automatiques.

  • Stockage de Fichiers : Les fichiers téléversés (images, PDF) ne sont pas stockés sur le service web, mais dans un espace de stockage objet (S3). Cette approche découplée est essentielle pour la scalabilité et la durabilité des données. Le module Drupal s3fs assure la liaison.

  • Déploiement Continu (CI/CD) : Chaque push sur les branches principales (dev, master) du dépôt Git déclenche automatiquement un processus de build et de déploiement sur la plateforme, garantissant des mises à jour rapides et fiables.

2. Pile Technologique (Stack)​

  • CMS : Drupal 11.x

  • Serveur Web : Nginx (configuré dans le conteneur)

  • Langage / Moteur : PHP 8.1+ (avec extensions requises : pdo_mysql, gd, etc.)

  • Base de Données : Posgres

  • Moteur de Template : Twig 3.x (natif à Drupal 11)

  • Dépendances PHP : Gérées par Composer 2

  • Dépendances Front-End : Gérées par NPM

  • Compilation Front-End : Sass (pour CSS) et esbuild (pour JavaScript ES6+)

3. Workflow de Développement​

Le cycle de vie du code est structuré pour la collaboration et la qualité.

  • Environnement Local : Standardisé via Docker Compose. Chaque développeur exécute une pile technique identique à la production sur sa machine locale.

  • Contrôle de Version : Git avec la stratégie GitFlow. Cette méthode sépare clairement le développement de nouvelles fonctionnalités, la préparation des releases et les corrections urgentes.

  • Qualité du Code :

    • Conventional Commits : Pour un historique Git sémantique et lisible.

    • Séparation stricte PHP/Twig : La logique métier est confinée aux fonctions de prétraitement (.theme), laissant les templates Twig se concentrer uniquement sur la structure HTML.

    • Configuration as Code : Toute la configuration structurelle de Drupal est exportée en fichiers YAML et versionnée dans Git, garantissant des déploiements reproductibles.

4. Optimisations et Sécurité​

  • Performance :

    • Mise en Cache Multi-Niveaux : Utilisation intensive du Render Cache, du Dynamic Page Cache et du cache pour anonymes de Drupal.

    • OPcache : Activé côté serveur pour pré-compiler le bytecode PHP.

    • Optimisation d'Images : Conversion automatique en WebP et utilisation des images responsives (<picture>).

    • Lazy Loading : L'attribut loading="lazy" est appliqué aux images et iframes.

  • Sécurité :

    • DevSecOps : Analyse des dépendances (composer audit), gestion des secrets via des variables d'environnement (et non dans Git).

    • Hardening Drupal : Mises à jour de sécurité régulières, politique de mots de passe forts, restriction d'accès à l'administration par IP.

    • Headers de Sécurité HTTP : Implémentation de Content-Security-Policy (CSP), X-Frame-Options, etc., pour protéger contre les attaques XSS et le clickjacking.